<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问量监控页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #333;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .header p {
            color: #666;
            font-size: 1.1em;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .chart-container h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        
        .chart-placeholder {
            width: 100%;
            height: 300px;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ddd;
            margin-bottom: 15px;
        }
        
        .chart-image {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
        }
        
        .stats-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stats-container h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        
        .stats-list {
            list-style: none;
        }
        
        .stats-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }
        
        .stats-item:last-child {
            border-bottom: none;
        }
        
        .stats-item .ip {
            font-weight: bold;
            color: #5238AF;
        }
        
        .stats-item .count {
            background: #5238AF;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.9em;
        }
        
        .loading {
            color: #666;
            font-style: italic;
        }
        
        .error {
            color: #e74c3c;
            background: #fdf2f2;
            padding: 10px;
            border-radius: 5px;
            border-left: 4px solid #e74c3c;
        }
        
        .refresh-btn {
            background: #5238AF;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            margin: 20px auto;
            display: block;
        }
        
        .refresh-btn:hover {
            background: #4a2f9d;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(82, 56, 175, 0.3);
        }
        
        .refresh-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📊 访问量监控中心</h1>
            <p>实时监控网站访问数据，掌握流量趋势</p>
        </div>
        
        <div class="dashboard">
            <div class="chart-container">
                <h2>📈 过去7天访问量趋势</h2>
                <div id="chart-placeholder" class="chart-placeholder">
                    <span class="loading">正在加载图表数据...</span>
                </div>
            </div>
            
            <div class="stats-container">
                <h2>🔥 今日热门IP排行</h2>
                <div id="stats-content">
                    <span class="loading">正在加载统计数据...</span>
                </div>
            </div>
        </div>
        
        <button id="refresh-btn" class="refresh-btn" onclick="loadData()">
            🔄 刷新数据
        </button>
    </div>

    <script>
        // 页面加载时自动获取数据
        window.onload = function() {
            loadData();
        };
        
        // 加载数据的函数
        function loadData() {
            const refreshBtn = document.getElementById('refresh-btn');
            const chartPlaceholder = document.getElementById('chart-placeholder');
            const statsContent = document.getElementById('stats-content');
            
            // 显示加载状态
            refreshBtn.disabled = true;
            refreshBtn.textContent = '📊 加载中...';
            chartPlaceholder.innerHTML = '<span class="loading">正在加载图表数据...</span>';
            statsContent.innerHTML = '<span class="loading">正在加载统计数据...</span>';
            
            // 调用get_total接口
            fetch('/get_total/')
                .then(response => response.json())
                .then(data => {
                    if (data.message === '获取成功') {
                        // 显示图表
                        if (data.image_base64) {
                            chartPlaceholder.innerHTML = `
                                <img src="data:image/png;base64,${data.image_base64}" 
                                     alt="访问量图表" class="chart-image">
                            `;
                        } else {
                            chartPlaceholder.innerHTML = '<div class="error">图表数据为空</div>';
                        }
                        
                        // 显示统计数据
                        if (data.today_data && data.today_data.length > 0) {
                            let statsHTML = '<ul class="stats-list">';
                            data.today_data.forEach((item, index) => {
                                const rank = index + 1;
                                const medal = rank <= 3 ? ['🥇', '🥈', '🥉'][rank - 1] : `${rank}.`;
                                statsHTML += `
                                    <li class="stats-item">
                                        <span class="ip">${medal} ${item.ip || '未知IP'}</span>
                                        <span class="count">${item.count || 0}次</span>
                                    </li>
                                `;
                            });
                            statsHTML += '</ul>';
                            statsContent.innerHTML = statsHTML;
                        } else {
                            statsContent.innerHTML = '<p style="color: #666; text-align: center;">暂无今日访问数据</p>';
                        }
                    } else {
                        throw new Error(data.error || '获取数据失败');
                    }
                })
                .catch(error => {
                    console.error('Error loading data:', error);
                    chartPlaceholder.innerHTML = '<div class="error">图表加载失败：' + error.message + '</div>';
                    statsContent.innerHTML = '<div class="error">统计数据加载失败：' + error.message + '</div>';
                })
                .finally(() => {
                    // 恢复按钮状态
                    refreshBtn.disabled = false;
                    refreshBtn.textContent = '🔄 刷新数据';
                });
        }
        
        // 自动刷新功能（每30秒刷新一次）
        setInterval(function() {
            if (!document.getElementById('refresh-btn').disabled) {
                loadData();
            }
        }, 30000);
    </script>
</body>
</html>